<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <link rel="stylesheet" href="./font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <header>
        <div class="tou">
            <div class="header-left">
                <section class="have-to-bottom address">
                    <div class="henan">
                        <span>河南</span>
                        <span class="to-bottom first-to-bottom"></span>
                    </div>
                    <div class="nan">
                        <div class="nan1">
                            <i class="baise"></i>
                            <p class="shouhuo">请选择所在的收货地区</p>
                            <table class="table1">
                                <tbody>
                                    <tr>
                                        <th>A</th>
                                        <td>
                                            <span class="mast">安微</span>
                                            <span class="mast">安阳</span>
                                        </td>

                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast leat">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>B</th>
                                        <td>
                                            <span class="mast">北京</span>
                                            <span class="mast">北海</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
                <div class="alert-box">

                </div>
            </div>
            <div class="header-right">
                <section class="have-to-bottom address">
                    <div class="qing">
                        <span class="denglu">请登录</span>
                        <span class="xiangang zonggong"></span>

                    </div>
                    <div class="xiaohai">
                        <i class="baise"></i>
                        <div class="xiaohai1">
                            <span class="xiaotu"></span>
                            <div class="xiaotu1">
                                <p class="yingyu">
                                    <a href="#">
                                        <span class="welcome">您好！</span>
                                        <span class="login">[请登录]</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <p class="xiaohai3">
                            <span class="a1">
                                <a href="#">我的收藏</a>
                            </span>
                            <span class="a2">
                                 <a href="#">我的收藏</a>
                            </span>
                            <span class="a3">
                                 <a href="#">我的收藏</a>
                            </span>
                            <span class="a4">
                                 <a href="#">我的收藏</a>
                            </span>
                            <span class="a5">
                                 <a href="#">我的收藏</a>
                            </span>
                            <span class="a6">
                                 <a href="#">我的收藏</a>
                            </span>
                        </p>
                    </div>
                </section>
                <section>
                    <span class="zhuce">注册</span>
                    <span class="xiangang1 zonggong"></span>
                </section>

                <section class="limao">

                    <div class="youli">
                        <i class="qiandao"></i>
                        <span class="youli1"> 签到有礼</span>
                        <span class="xiangang2 zonggong"></span>
                    </div>
                    <div class="youli2">
                        <div class="dingdan">
                            <i class="sanjiao"></i>
                            <div class="day">
                                <div class="animate">
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">1天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">2天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">3天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">4天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">5天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">6天</span>
                                    </div>
                                    <div class="fengche">
                                        <span class="fengche1 span1"></span>
                                        <span class="every">7天</span>
                                    </div>
                                </div>
                                <span class="jsp"></span>
                                <span class="link"></span>
                            </div>
                            <div class="msg">
                                <a href="#" class="xiaqian">签到</a>
                                <a href="#" class="qingxi">每天签到惊喜，连续签到更享心动奖励</a>
                            </div>
                        </div>
                    </div>
                </section>
                <section>
                   <span class="danzi">我的订单</span>
                     <span class="xiangang3 zonggong"></span>
                </section>
                <section class="have-to-bottom class1 address">
                    <div class="henan3">
                        <span>我的特卖</span>
                        <span class="to-bottom first-to-bottom"></span>
                         <span class="xiangang4 zonggong"></span>
                    </div>
                    <div class="top1">
                        <i class="baise"></i>
                        <p class="nanlist">
                            <span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                            <span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span><span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                        </p>
                    </div>
                </section>
                <section class="have-to-bottom class2 address">
                    <div class="henan3">
                        <span>会员俱乐部</span>
                        <span class="to-bottom first-to-bottom"></span>
                          <span class="xiangang5 zonggong"></span>
                    </div>
                    <div class="top2">
                        <i class="baise1"></i>
                        <p class="nanlist">
                            <span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                            <span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span><span>
                                <a href="#">
                                    品牌收藏(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                        </p>
                    </div>
                </section>
                <section class="have-to-bottom class3 address">
                    <div class="henan3">
                        <span>客服服务</span>
                        <span class="to-bottom first-to-bottom"></span>
                          <span class="xiangang6 zonggong"></span>
                    </div>
                    <div class="top3">
                        <i class="baise1"></i>
                        <p class="nanlist">
                            <span>
                                <a href="#">
                                    联系客服(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                            <span>
                                <a href="#">
                                    帮助中心(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                            <span>
                                <a href="#">
                                    服务中心(
                                        <i>0</i>
                                    )
                                </a>
                            </span>
                        </p>
                    </div>
                </section>
                <section class="have-to-bottom  address">

                    <div class="qing1">
                        <i class="shouji"></i>
                        <span class="denglu">手机版</span>
                         <span class="xiangang7 zonggong"></span>

                    </div>
                    <div class="xiaoha">

                        <div class="xiaohai2">
                            <i class="baise"></i>
                            <a href="#">
                              <img src="./img/qr.jpg" alt="">
                          </a>
                            <p>随便逛 随便抢</p>
                        </div>

                    </div>
                </section>
                <section class="have-to-bottom more class4 address">
                    <div class="qing1">
                        <span class="denglu"> 更多</span>
                        <span class="to-bottom"></span>

                    </div>
                    <div class="xiaoha">

                        <div class="xiaohaiw">
                            <i class="baise"></i>
                            <h5 class="hezuo">合作专区</h5>
                            <p class="clear">
                                <a href="#">联名卡申请</a>
                                <a href="#">唯品卡</a>
                                <a href="#">支付专区</a>
                                <a href="#">关于我们</a>
                            </p>

                            <div class="hengxian">
                                <h5 class="women">关于我们</h5>
                                <p class="clear">
                                    <a href="#">Sell on vip</a>
                                    <a href="#">品牌招商</a>
                                    <a href="#">官方博客</a>

                                </p>
                            </div>
                        </div>

                    </div>


                </section>
            </div>
    </header>
    <div class="main-first">
        <section>
            <img src="./img/logo.png" alt="">
        </section>
        <section>
            <img src="./img/logo_img01.png" alt="">
            <img src="./img/logo_img02.png" alt="">
            <img src="./img/logo_img03.png" alt="">

        </section>
        <section class="lieche">
            <div class="bian">
                <div class="bian1 baa">
                    <span class="ling">
                        <span class="yuan">0</span>
                    </span>
                    <i class="gouwu"></i>
                    <span class="daizi">我的购物袋</span>
                </div>
                <div class="tool">

                    <div class="tool1">

                        <div class="tool2">
                            <i class="meili"></i>
                            <p>
                                好像还未登录
                                <a href="#">马上登录</a> 查看购物袋
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    </div>


    <nav class="nav">
        <div class="container">
            <ul class="nav-list ">
                <li class="first"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家具家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li class="gengduo">
                    <span class="duoshao">
                     <a href="#">
                    更多
                    <i class="i"></i>
                    </a>
                  </span>
                    <div id="tankuang">
                        <div class="item">

                            <img src="./img/more01.jpg" alt="">
                            <div class="shaw"></div>
                            <div class="shaw1">
                                <p class="nuw">女装</p>
                            </div>


                        </div>
                        <div class="item">

                            <img src="./img/more02.jpg" alt="">
                            <div class="shaw"></div>
                            <div class="shaw1">
                                <p class="nuw">鞋包</p>
                            </div>

                        </div>
                        <div class="item">

                            <img src="./img/more03.jpg" alt="">
                            <div class="shaw"></div>
                            <div class="shaw1">
                                <p class="nuw">配饰</p>
                            </div>

                        </div>
                        <div class="item">

                            <img src="./img/more04.jpg" alt="">
                            <div class="shaw"></div>
                            <div class="shaw1">
                                <p class="nuw">运动</p>
                            </div>

                        </div>
                        <div class="item">

                            <img src="./img/more05.jpg" alt="">
                            <div class="shaw"></div>
                            <div class="shaw1">
                                <p class="nuw">唯品 奢</p>
                            </div>

                        </div>
                    </div>
                </li>
                <li class="fenlei"><a href="#">
                    <img src="./img/yugao.png" alt="">
                    分类
                </a></li>
                <li class="yugao"><a href="#">
                      <img src="./img/fenlei.png" alt="">
                    预告
                </a></li>
            </ul>
        </div>
    </nav>
    <!--轮播图  -->
    <div class="dabian">
        <div class="container">
            <div class="banner">
                <div class="banner-bg">
                    <div class="container lunbo">
                        <ul class="lunbomg">
                            <li class="active"><a href="#"><img src="./img/lunbo01.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                            <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                            <a href="#" class="prev lunbo-btn"></a>
                            <a href="#" class="next lunbo-btn"></a>
                        </ul>
                        <ul class="lunboin">
                            <li><a href="#">欧莱雅集团VIP大牌日</a></li>
                            <li><a href="#">时尚风暴 最高满199减40</a></li>
                            <li><a href="#">大派发居家夏末福利大派发</a></li>
                            <li><a href="#">全球早秋扫货指南</a></li>
                            <i class="red-border"></i>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="xiabian">
                <div class="container">
                    <div class="zuihou">
                        <a href="#">
                              <img src="./img/bg_v3.jpg" alt="">
                          </a>
                        <div class="sige">
                            <a href="#">
                                    <span class="jiaju"></span>
                                    <img src="./img/top01.jpg" alt="">
                                </a>
                            <a href="#">
                                    <span class="jiaju"></span>
                                    <img src="./img/top02.jpg" alt="">
                                </a>
                            <a href="#">
                                    <span class="jiaju"></span>
                                    <img src="./img/top03.jpg" alt="">
                                </a>
                        </div>
                    </div>
                </div>
            </div>


            <div class="title">
                <div class="container">
                    <img src="./img/title_v2.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--右侧  -->
    <div class="youbian">
        <ul class="youbian-list">
            <li class="account">
                <a href="#">
                    <span class="fa fa-user-o"></span>
                    <p>账号</p>
                </a>
                <div class="account-move">
                    <div class="header-img">
                        <img src="./img/my_cnt_pic.jpg" alt="">
                        <p> 你好！请
                            <a href="#">登录</a> |
                            <a href="#">注册</a>
                        </p>
                    </div>
                    <ul class="message">
                        <li class="order">
                            <a href="#">
                                <span class="icon"></span>
                                <p>我的订单</p>
                            </a>
                        </li>
                        <li class="msg">
                            <a href="#">
                                <span class="icon"></span>
                                <p>我的消息</p>
                            </a>
                        </li>
                    </ul>
                    <div class="member">
                        <a href="#">会员俱乐部</a>
                    </div>
                    <a href="#" class="close">&times;</a>
                </div>
            </li>
            <li class="shopping-bag">
                <a href="#">
                    <span class="fa fa-shopping-bag"></span>
                    <p>购物袋</p>
                    <span class="count">0</span>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-money"></span>
                    <p>我的优惠券</p>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-heart-o"></span>
                    <p>品牌收藏</p>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-star-o"></span>
                    <p>商品收藏</p>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-history"></span>
                    <p>我的足迹</p>
                </a>
            </li>
        </ul>
        <ul class="youbian-bottom">
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-edit (alias)"></span>
                    <p>会员反馈</p>
                </a>
            </li>
            <li class="side-move">
                <a href="#">
                    <span class="fa fa-angle-up"></span>
                    <p>返回顶部</p>
                </a>
            </li>
        </ul>
    </div>

    <main>

    </main>
</body>

</html>
<script>
    var nav = document.querySelector('.nav');
    function mainFixed() {
        if (document.scrollingElement.scrollTop >= 130) {
            nav.style.position = 'fixed';
            nav.style.left = '0px';
            if (nav.style.top != 0) {
                setTimeout(function () {
                    nav.style.top = '0px';
                }, 100);
            }
        } else {
            nav.style.position = 'static';
            nav.style.top =
                -2 * nav.offsetHeight + 'px';
        }
    }
    window.onscroll = mainFixed;

    window.onload = function () {

        var lunboImgs = document.querySelectorAll('.lunbo .lunbomg li');
        var lunboInfos = document.querySelectorAll('.lunbo .lunboin li');
        var redBorder = document.querySelector('.lunbo .lunboin .red-border');
        var lunbo = document.querySelector('.lunbo');
        var prev = document.querySelector('.lunbo .prev');
        var next = document.querySelector('.lunbo .next');
        var index = 0;
        var timer = null;

        function prevImg() {
            index = index == 0 ? lunboImgs.length - 1 : index - 1;
            showImg();
        }
        function nextImg() {
            index = index == lunboImgs.length - 1 ? 0 : index + 1;
            showImg();
        }
        var lastIndex = index;
        function showImg() {
            lunboImgs[lastIndex].className = '';

            lunboImgs[index].className = 'active';
            redBorder.style.left = lunboInfos[index].offsetWidth * index + 'px';
            lastIndex = index;
        }
        // 自动
        timer = setInterval(nextImg, 3000);

        // 指示灯
        for (var i = 0; i < lunboInfos.length; i++) {
            lunboInfos[i].index = i;
            lunboInfos[i].onmouseover = function () {
                index = this.index;
                showImg();
            }
        }

        lunbo.onmouseover = function () {
            clearInterval(timer);
            timer = null;
        }
        lunbo.onmouseout = function () {
            if (timer) return;
            timer = setInterval(nextImg, 3000);
        }
        // 手动点击
        prev.onclick = function () {
            prevImg();
        }
        next.onclick = function () {
            nextImg();
        }
    }
    var cle = document.querySelector('.account .close');
    var account = document.querySelector('.account .account-move');
    var Account = document.querySelector('.youbian .youbian-list .account');
    Account.onmouseover = function () {
        account.style.left = -account.offsetWidth + 'px';
    }
    Account.onmouseout = function () {
        account.style.left = 0;
    }
    cle.onclick = function () {
        account.style.left = 0;

    }

</script>